/*
  学习目标：使用Switch组件
*/
import React from 'react';
import { Route, Link, BrowserRouter as Router, NavLink, Switch } from 'react-router-dom';
import './index.css';
export default class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <h1>app组件</h1>
          <ul>
            <li>
              <Link to="/home">首页</Link>
            </li>
            <li>
              <NavLink to="/home" activeClassName="my-active">
                首页
              </NavLink>
            </li>
            <li>
              <NavLink to="/my" activeClassName="my-active" exact>
                我的音乐
              </NavLink>
            </li>
            <li>
              <NavLink to="/friend" activeClassName="my-active">
                我的朋友
              </NavLink>
            </li>
          </ul>

          {/* 2. 👍 推荐将Route都包裹在Switch组件 */}
          <Switch>
            <Route path="/home" component={Home}></Route>
            <Route path="/home" component={Home}></Route>
            <Route path="/home" component={Home}></Route>
            <Route path="/home" component={Home}></Route>
            <Route path="/my" component={MyMusic}></Route>
            <Route path="/friend" component={Friend} exact></Route>

            <Route path="/" component={Friend} exact></Route>
            {/* 💥 注意path不写可以用来处理404页面，注意放在最下面 */}
            <Route component={NotFound}></Route>
          </Switch>
        </div>
      </Router>
    );
  }
}

function NotFound(params) {
  return <div>404yemian</div>;
}

function Home(params) {
  return <h1>我是首页组件</h1>;
}

function MyMusic(params) {
  return <h1>我是我的音乐件</h1>;
}

function Friend(params) {
  return <h1>我是朋友组件</h1>;
}
